<template>
	<div class="layout-padding-auto layout-padding-view">
		<el-form :model="state.queryForm" ref="queryRef1" :inline="true" @keyup.enter="getDataList">
			<el-form-item :label="$t('checkStock.materialCode')" prop="materialCode">
				<el-input
					:placeholder="$t('form.pleaseInput', [$t('checkStock.materialCode')])"
					clearable
					v-model="state.queryForm.materialCode"
					style="width: 160px"
				/>
			</el-form-item>
			<el-form-item :label="$t('checkStock.materialName')" prop="materialName">
				<el-input
					:placeholder="$t('form.pleaseInput', [$t('checkStock.materialName')])"
					clearable
					v-model="state.queryForm.materialName"
					style="width: 170px"
				/>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList" icon="search" type="primary">
					{{ $t('common.queryBtn') }}
				</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
			</el-form-item>
			<el-form-item> </el-form-item>
		</el-form>
		<el-table
			:data="state.dataList"
			v-loading="state.loading"
			border
			stripe highlight-current-row
			@row-click="rowClick"
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle.headerCellStyle"
			class="layout-padding-view"
			@sort-change="sortChangeHandle"
		>
			<el-table-column fixed type="index" label="#" width="60" />
			<el-table-column fixed width="140" prop="materialCode" :label="$t('checkStock.materialCode')" />
			<el-table-column width="180" prop="materialName" :label="$t('checkStock.materialName')" />
			<el-table-column width="240" prop="materialSpec" :label="$t('checkStock.materialSpec')" />
			<el-table-column width="240" prop="mesWarehouseCode" :label="$t('mes.warehouse')" />
			<el-table-column width="140" prop="unit" :label="$t('checkStock.unit')" />
			<el-table-column prop="batchNumber" :label="$t('checkStock.batchNumber')" />


			<el-table-column prop="checkQty" width="120" :label="$t('checkStock.checkQty')">
				<template #default="scope">
					<el-tag type="warning" effect="light">{{ scope.row.checkQty }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="120" prop="stockQty" label="MES库存">
				<template #default="scope">
					<el-tag type="success" effect="light"> {{ scope.row.stockQty }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="k3StockQty" width="120" align="center" label="K3库存">
				<template #default="scope">
					<el-tag type="primary" effect="light">{{ scope.row.k3StockQty }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="differentQty" width="120" :label="$t('checkStock.differentQty')">
				<template #default="scope">
					<el-tag effect="plain" type="danger" v-if="scope.row.differentQty < 0">{{ scope.row.differentQty }}</el-tag>
					<el-tag effect="plain" type="primary" v-else-if="scope.row.differentQty > 0">{{ scope.row.differentQty }} </el-tag>
					<el-tag effect="plain" type="info" v-else>{{ scope.row.differentQty }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="120"  label="K3库存差异">
				<template #default="scope">
					<el-tag effect="plain" type="danger" v-if="scope.row.checkQty < scope.row.k3StockQty">
						{{ parseFloat((scope.row.checkQty - scope.row.k3StockQty)?.toFixed(4)) }}
					</el-tag>
					<el-tag effect="plain" type="primary" v-else-if="scope.row.checkQty > scope.row.k3StockQty">
						{{ parseFloat((scope.row.checkQty - scope.row.k3StockQty)?.toFixed(4)) }}
					</el-tag>
					<el-tag effect="plain" type="info" v-else>
						{{ parseFloat((scope.row.checkQty - scope.row.k3StockQty)?.toFixed(4)) }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { CheckstockMaterialGetPageSet } from '/@/api/platform/mes/wmsCheckstock';

const props = defineProps({
	data: {
		type: Object,
		default: () => ({}),
	},
});

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: CheckstockMaterialGetPageSet,
});

const emit = defineEmits(['rowClick']);
// 变量
const queryRef1 = ref();

// 表格
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);

// 监听props.data的变化
watch(
	() => props.data,
	(newValue, oldValue) => {
		state.queryForm = newValue;
		getDataList();
	},
	{ deep: true }
);

// 重置搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef1.value?.resetFields();
	// 清空多选
	getDataList();
};
const rowClick = (row: any) => {
	emit('rowClick', row);
};
</script>

<style scoped lang="scss">
.el-form-item {
	margin-bottom: 5px !important;
}
</style>